<template>
    <div class="sc-compare-item">
        <template v-if="props.pageType === 'answer'">
            <p class="q-header" v-if="title">{{title}}</p>
            <ul class="comment-list">
                <li v-for="(item, index) in row" :key="item.index" class="comment-item">
                    <span class="comment-label">{{item.title}}</span>
                    <Star :score="item.col[0].answer.answer" :size="22" @update:score="updateScore($event, index)"/>
                </li>
            </ul>
        </template>
        <template v-else>
            <div class="summary-item">
                <span class="comment-label">整体得分</span>
                <Star :score="summary" :size="26" :disabled="true" :score-bold="true"/>
            </div>
            <ul class="comment-list">
                <li v-for="item in row" :key="item.index" class="comment-item">
                    <span class="comment-label">{{item.title}}</span>
                    <Star :score="item.col[0].answer.answer || 0" :size="22" :disabled="true"/>
                </li>
            </ul>
        </template>
    </div>
</template>

<script setup>
import Star from '@/components/star/star.vue';
import { ref, reactive, watchEffect, onBeforeMount, nextTick, watch } from 'vue';
import { deepCopy } from '@/lib/tools';

const emit = defineEmits(['answer']);

const props = defineProps({
    id: {
        type: String,
        default: '',
    },
    title: {
        type: String,
        default: ''
    },
    content: {
        type: Object,
        default: () => {
            return {};
        }    
    },
    userAnswerList: {
        type: Array,
        default: () => {
            return [];
        }    
    },
    pageType: {
        type: String,
        default: 'answer',
    },
    isPreview: { // 预览状态下清空数据
        type: Boolean,
        default: false
    }
});

let answerObj = reactive({});

const col = ref(props.content && props.content.col || []);

const row = ref(props.content && props.content.row || []);

const summary = ref(0);

watch(() => props.content, (val) => {
    col.value = props.content && props.content.col || [];
    row.value = props.content && props.content.row || [];
    init();
}, {immediate: true})

// watchEffect(() => {
//     col.value = props.content && props.content.col || [];
//     row.value = props.content && props.content.row || [];
//     init();
// })

onBeforeMount(() => {
    if (!props.isPreview) {
        initAnswer();
    }
    init();
});



function initAnswer() {
    (props.userAnswerList || []).forEach(item => {
        answerObj[item.questionIndex] = item;
    });
    emit('answer', answerObj, '7', true);
}

function init() {
    // 初始化数据（答案放进去)
    let tempSummary = 0;
    row.value.map(r => {
        let temp = [...col.value];
        temp = temp.map((item, index) => {
            return deepCopy(item);
        });
        r.col = (temp).map(c => {
            let reg = new RegExp(`\^${r.index}-${c.index}-*`);
            let reg1 = new RegExp(`\^${r.index}-${c.index}`);
            c.answer = { answer: '' };
            for(let key in answerObj) {
                if(reg.test(key) || reg1.test(key)) {
                    if(answerObj[key] && answerObj[key].answer) {
                        let answer = answerObj[key].answer ? parseInt(answerObj[key].answer) : 0;
                        answerObj[key].answer = answer;
                        tempSummary += answer;
                        c.answer = props.pageType === 'detail' ? answerObj[key] : { answer: 0 };
                        c.questionIndex = key;
                    }
                }
            }
            return c;
        });    
        return r;
    });
    if (row.value.length) {
        summary.value = tempSummary / row.value.length;
        // console.log(tempSummary, row, props.content, row.value.length);
    }
   
}

async function updateScore (event, index) {
    await nextTick();
    // console.log('updateScore', event, index);
    // row.value[index].col[0].answer.answer = 0;
    changeAnswer(event, index, 0);
}

function changeAnswer(e, rIndex, cIndex) {
    let tempIndex = '';
    let iIndex = '';
    col.value[cIndex].itemList.forEach((item, index) => {
        if(item.title == e) {
            iIndex = index;
        }
    });
    tempIndex = `${row.value[rIndex].index}-${row.value[rIndex].col[cIndex].index}-${row.value[rIndex].col[cIndex].itemList[iIndex].index}`;
    
    // reset
    let reg = new RegExp(`${row.value[rIndex].index}-${row.value[rIndex].col[cIndex].index}-*`);
    for(let key in answerObj) {
        if(reg.test(key)) {
            answerObj[key] = {};
        }
    }
    // debugger;
    // 选择结果赋值
    row.value[rIndex].col[cIndex].answer.answer = e;
    row.value[rIndex].col[cIndex].questionIndex = tempIndex;
    
    answerObj[tempIndex] = {
        answer: e
    };
    // console.log(answerObj, row.value, row.value[rIndex].col[cIndex], 'answerObj==============================');
    emit('answer', answerObj, '7', props.id);
}

</script>

<style lang="scss" scoped>
.sc-compare-item {
    .q-header {
        margin-top: 15px;
        color: var(--srt-color-gray);
        font-size: 14px;
        line-height: 15px;
        &::before {
            content: '\e67f';
            font-family: 'iconfont';
            font-size: 15px;
            color: var(--srt-color-warning);
            margin-right: 6px;
        }
    }
    .comment-list {
        display: flex;
        flex-wrap: wrap;
        .comment-item {
            display: flex;
            align-items: center;
            margin-top: 30px;
            // margin-right: 104px;
            min-width: 338px;
            .comment-label {
                font-size: 16px;
                color: var(--srt-color-black);
                margin-right: 20px;
                width: 96px;
                text-align: right;
            }
        }
    }
    .summary-item {
        display: flex;
        align-items: center;
        margin-top: 30px;
        margin-right: 104px;
        .comment-label {
            font-size: 16px;
            color: var(--srt-color-black);
            margin-right: 20px;
        }
    }   
}
</style>